<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html class="wrap">

	<head>
		<meta charset="utf-8">
		<title>课程详情</title>
		<!-- 课程详情css文件-->
		<link rel="stylesheet" href="css/pc/cores/alert.css" />
		<link rel="stylesheet" href="css/pc/cores/noticeList.css" />
		<link rel="stylesheet" href="css/pc/modules/classInfo.css">
		<link rel="stylesheet" href="css/pc/cores/styleullist.css" />
		<link rel="stylesheet" href="css/pc/cores/sytle.css" />
		<!-- 整体框架css文件-->
		<link rel="stylesheet" href="css/public/fh.css" />
		<!-- 整体框架图标文件-->
		<link rel="stylesheet" href="css/pc/cores/font-awesome.min.css">
		<link rel="stylesheet" href="css/pc/modules/stuCourseStudy.css">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
	
			body,
			html {
				width: 100%;
				height: 100%;
			}
	
			.wrapper-ban {
				width: 100%;
				height: 100%;
				position: fixed;
				top:0;
				left:0;
				bottom:0;
				right:0;
				z-index: 9999;
			}
	
			.wrapper-ban .board {
				cursor: pointer;
			}
	
			.wrapper-ban .btn {
				width: 610px;
				height: 35px;
				margin: 10px 0 0px 10px;
				position: fixed;
				right:0;
				bottom:20px;
			}
	
			.wrapper-ban .btn input {
				border: none;
				outline: none;
				width: 100px;
				height: 35px;
				vertical-align: middle;
				margin-right: 10px;
				border-radius: 10px;
				background-color: chartreuse;
			}
	
			/* input type = color时，设置拾色器的外层包括的边框带样式*/
			.wrapper-ban .btn input[type="color"]::-webkit-color-swatch-wrapper-ban {
				padding: 0px;
			}
	
			/* input type = color 设置拾色器内层边框样式*/
			.wrapper-ban .btn input[type="color"]::-webkit-color-swatch {
				border: 3px solid chartreuse;
				border-radius: 10px;
			}
	
			.wrapper-ban .btn input[type="range"] {
				padding: 0 5px;
				/* 消除默认样式 */
				-webkit-appearance: none;
				background-color: chartreuse;
			}
	
			/* 设置 活动轨道的样式*/
			.wrapper-ban .btn input[type="range"]::-webkit-slider-thumb {
				-webkit-appearance: none;
				width: 10px;
				height: 10px;
				background-color: #fff;
				border-radius: 50%;
				margin-top: -4px;
			}
	
			/* 设置滑动小圆点的样式 */
			.wrapper-ban .btn input[type="range"]::-webkit-slider-runnable-track {
				width: 90px;
				height: 2px;
				background-color: #666;
			}
			.hua-btn{
				height:48px;
				position: fixed;
				bottom:200px;
				right:48px;
				z-index: 99999;
				display: flex;
				align-items: center;
			}
			.hua-icon{
				width:36px;
				height:36px;
				background: #fff url('images/pc/hua.png') no-repeat 0 0;
				border-radius: 18px;
				cursor: pointer;
				margin-left:12px;
			}
			.hua-ban{
				height:48px;
				background:#fff;
				border-radius: 24px;
				padding:0 30px;
				display: flex;
			}
			.ban-color{
				height:100%;
				display: flex;
				align-items: center;
			}
			.ban-color > div{
				width:26px;
				height:26px;
				background: #000;
				margin-right:10px;
				border-radius: 13px;
			}
			.ban-color .ban-black{
				background: #000;
			}
			.ban-color .ban-red{
				background: #ed1c24;
			}
			.ban-color .ban-blue{
				background: #00a2e8;
			}
			.ban-weight{
				height:100%;
				display: flex;
				align-items: center;
			}
			.ban-weight > div{
				width:26px;
				height:26px;
				margin-left:4px;
				border-radius: 13px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.ban-weight > div > div{
				background: #000;
			}
			.ban-weight .ban-small div{
				width:4px;
				height:4px;
				border-radius: 2px;
			}
			.ban-weight .ban-normal div{
				width:7px;
				height:7px;
				border-radius: 4px;
			}
			.ban-weight .ban-big div{
				width:9px;
				height:9px;
				border-radius: 5px;
			}
		</style>
		<script>
			var result = '${result}';
			result = JSON.parse(result);
		</script>
	</head>

	<body>
		<!-- 画布 -->
		<div class="wrapper-ban">
			<canvas id="board" class="board"></canvas>
			<div class="btn" style="z-index: -99999;opacity:0;">
				<input type="color" class="color">
				<input type="button" value="清屏" class="clear">
				<input type="button" value="撤销" class="reset">
				<input type="button" value="橡皮" class="eraser">
				<input type="range" class="range" min="2" max="20" value="5">
			</div>
		</div>
		<div class="hua-btn">
			<div class="hua-ban">
				<div class="ban-color">
					<div class="ban-black" ctx-color="#000"></div>
					<div class="ban-red" ctx-color="#ed1c24"></div>
					<div class="ban-blue" ctx-color="#00a2e8"></div>
				</div>
				<div class="ban-weight">
					<div class="ban-small" weight="5">
						<div></div>
					</div>
					<div class="ban-normal" weight="10">
						<div></div>
					</div>
					<div class="ban-big" weight="20">
						<div></div>
					</div>
				</div>
			</div>
			<div class="hua-icon" onclick="$('.wrapper-ban').toggle();$('.hua-ban').toggle();$('.clear').trigger('click')"></div>
		</div>
		<!--面包屑-->
		<div class="crumbs kcm" id="crumbs">
			<div class="index-img"></div>
			<a href="javascript:void(0)" class="index">首页</a><label>></label>
			<a href="javascript:void(0)" style="cursor: default;">课程详情</a>

		</div>
		<div class="crumbs kcs" id="crumbs">
			<div class="index-img"></div>
			<a href="javascript:void(0)" class="index">首页</a><label>></label>
			<a href="javascript:void(0)" class="kck">课程库</a>
			<label>></label>
			<a href="javascript:void(0)" style="cursor: default;">课程详情</a>

		</div>

		<div class="content_box">
			<div class="title_nav">
				<div class="title_box_select fl" id="table_one">课程详情</div>
				<div class="xxtz" id="fanhui">
					<a href="javascript:void(0)" class="returnA">返回</a>
				</div>
			</div>

		</div>

		<!--课程信息-->
		<div class="panel white-background">
			<div class="class-info">
				<div class="class-icon">
					<div class="block" data="hadoop" id="courseColer">
						<div class="info" id="FcourseColer">
							<h1 class="title" id="courseName"></h1>
							<h3 class="desc" id="courseTitle"></h3>
						</div>
					</div>
				</div>
				<div class="class-info-table">
					<div class="info-table" data="hadoop">
						<h1 class="title" id="fcourseName"></h1>
						<div class="teacher">
							<div class="icon-teacher">
							</div>
							<div class="name">
								制作教师 : <span id="userName"></span>
							</div>
						</div>
						<hr>
						<div class="desc">
							<div class="icon-file">
							</div>
							<div class="name">
								课程介绍 :
							</div>
							<div class="text" id="courseIntroduction">

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--课程信息-->
		<!--学习进度-->
		<div class="panel white-background">
			<div class="progress-info operateBtn">
				<div progress="1" max="10" class="progress">
					<div class="finished-bar">
					</div>
					<div class="unfinished-bar">
					</div>
					<div class="text progress-text">
						已学习24/24课时
					</div>
					<div class="text next-text" style="display: none;" id="wancengBtn">
						已完成
					</div>
				</div>
				<button type="button" class="continue-btn" style="display: none;">已完成</button>

			</div>

		</div>
		<!--学习进度-->
		<!--章节目录-->
		<div class="panel white-background">
			<div class="class-list">
				<div class="title">
					目录
				</div>
			</div>
		</div>
		<!--章节目录-->
		<!--弹出盒-->
		<div class="abs_bg" style="display:none;">
		</div>
		<!--PDF弹出盒子-->
		<div class="alert PDF" style="display: none;">
			<a href="javascript:void(0);" class="close"><img src="images/pc/gb.jpg"></a>  
			<div class="alert_box" id="PDF">
			</div>
		</div>
		<!--PDF弹出盒子-->
		<!--视频盒子-->
		<div class="alert video" style="display: none;">
			<a href="javascript:void(0);" class="close2"><img src="images/pc/gb.jpg"></a>
			<div class="alert_box">
				<video src="" autoplay controls id="video" style="width: 100%; height: 100%;">您的浏览器不支持 video 标签。</video>
			</div>
		</div>
		<!--提交作业-->

		<div class="bg"></div>
		<div class="fixed_box" id="fixed_box3">
			<h1>选择文件</h1>
			<div class="fixed_content" id="fixed_content3">
				<a class="btn_addPic up-index" href="javascript:void(0);">
					<form id="formHomework" action="stuUploadHomework" method="post" enctype="multipart/form-data">
						<label for="file" id="fileBtn"><span><em>+</em>添加文件</span>  </label>
						<input class="file" title="仅支持.pdf格式" type="file" size="3" name="file" id="file" style="display: none;">
						<input type="text" name="taskType" id="taskType" value="1" style="display: none;">
						<input type="text" name="courseId" id="courseId" value="" style="display: none;">
						<input type="text" name="chapterId" id="chapterId" value="" style="display: none;">
					</form>

				</a>
				<span class="file_name"></span>
				<div class="button_box" id="button_box3">
					<a href="javascript:void(0)" class="tijiao2 hover-btn" id="submit3">导入</a>
					<a href="javascript:void(0)" class="result hover-btn" id="result3" style="margin-left:30px">取消</a>
				</div>
			</div>
		</div>

		<!--视频盒子-->
		<!--Jquery整体框架文件-->
		<script type="text/javascript" src="js/public/jquery-1.11.2.min.js"></script>
		<!-- 提示盒子插件-->
		<script type="text/javascript" src="js/pc/cores/Alert.js"></script>
		<script type="text/javascript" src="js/pc/cores/delogin.js"></script>
		<!--pdf插件-->
		<script type="text/javascript" src="js/pc/cores/pdfobject.js"></script>
		<script type="text/javascript" src="js/pc/cores/Alert.js"></script>
		<script src="js/pc/cores/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/pc/cores/noticeShow.js"></script>
		<!-- 我的课程页面自用Js文件-->
		<script type="text/javascript" src="js/pc/modules/stuCourseStudy.js"></script>

		<!--获取数据-->
		<script>
			var result = '${result}';
			result = JSON.parse(result);
		</script>
		<script>
			window.onload = function () {
				var $board = $(".board")[0]; //jquery对象与dom对象转换
				$board.width = window.innerWidth;
				$board.height = window.innerHeight;
				var ctx = $board.getContext("2d"); //创建画布对象
				var bool = false;
				var left = $(".board").offset().left; //获取画布的left值
				var top = $(".board").offset().top; //获取画布的top值
				var canvasW = $(".board").width(); //获取画布的宽度
				var canvasH = $(".board").height(); //获取画布的高度
				//console.log(top,left);
				//console.log(canvasW,canvasH);
				var img = []; //用于存放画布图片截图的数组
				// draw();
				ctx.lineCap = "round"; //设置线条的结束端点样式
				ctx.lineJion = "round"; //设置两条线相交时，所创建的拐角类型
				ctx.lineWidth = 5;
				$(".board").mousedown(function (e) {
					bool = true;
					ctx.beginPath(); //起始/重置一条路径
					ctx.moveTo(e.clientX - left, e.clientY - top); //把路径移动到画布中的指定点，不创建线条
					var pic = ctx.getImageData(0, 0, canvasW, canvasH); //获取当前画布的图像
					img.push(pic); //将当前图像存入数组
					// ctx.moveTo(e.clientX, e.clientY);
				})
				$(".board").mousemove(function (e) {
					//console.log(bool);
					if (bool) {
						// ctx.lineTo(e.clientX, e.clientY);
						ctx.lineTo(e.clientX, e.clientY); //添加一个新点，在画布中创建从该点到最后指定点的线条
						ctx.stroke();
					}
				});
				$(".board").mouseout(function (e) {
					ctx.closePath(); //当鼠标移出画布区域时,创建从当前点回到起始点的路径
					bool = false;
				})
				$(".board").mouseup(function (e) {

					ctx.closePath(); //当鼠标抬起时,创建从当前点回到起始点的路径
					bool = false;
				})
				$(".clear").click(function () {
					ctx.clearRect(0, 0, canvasW, canvasH); //创建一个等大画布覆盖
				});
				$(".reset").click(function () {
					if (img.length > -1) {
						ctx.putImageData(img.pop(), 0, 0); //删除图像数组最后一位
					}
				})
				$(".eraser").click(function () {
					ctx.strokeStyle = "#fff";
				});
				$(".ban-color div").click(function(){
					ctx.strokeStyle = $(this).attr('ctx-color');
				});
				$(".color").change(function () {
					ctx.strokeStyle = this.value; //改变颜色
				});
				$(".ban-weight div").click(function(){
					ctx.lineWidth = $(this).attr('weight');
				});
				$(".range").change(function () {
					ctx.lineWidth = this.value; //改变线条粗细
				})
				$(".wrapper-ban").hide();
				$(".hua-ban").hide();
				$(".hua-btn").hide();
				$(".courseware").click(function(){
					$(".hua-btn").show();
				});
				$(".close").click(function(){
					$(".hua-btn").hide();
				});
				function resize_canvas(){
					//console.log(1);
					canvas = document.getElementById("board");
					canvas.width  = window.innerWidth;
					canvas.height = window.innerHeight;
				}
				window.onresize = function(){
					resize_canvas();
				}

			}
		</script>
	</body>

</html>